<template>
    <el-form :inline="true" :model="formData">
        <el-form-item label="父类">

            <CategoryTree v-model="formData.parentId"> </CategoryTree>
        </el-form-item>
        <el-form-item label="状态">
            <el-select v-model="formData.status" clearable style="width: 100px;">
                <el-option v-for="item in productStatusData" :key="item.code" :label="item.message"
                    :value="item.code" />
            </el-select>
        </el-form-item>
        <el-form-item label="名称">
            <el-input v-model="formData.name" placeholder="请输入关键字" clearable />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="id" label="编号" width="80" />
        <el-table-column prop="name" label="名称" width="100" />

        <el-table-column prop="parentName" label="父类" width="150" />
        <el-table-column prop="statusX" label="状态" width="120" />
        <el-table-column label="图片" width="120">
            <template #default="scope">
                <img :src="scope.row.img" class="img">
            </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" min-width="160">
            <template #default="scope">
                <el-button type="primary" size="small" @click="editClick(scope.row)">编辑</el-button>
                <el-button type="danger" size="small" @click="deleteClick(scope.row)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <br />
    <el-pagination background :page-size="pageData.pageSize" @change="pageChange" layout="prev, pager, next"
        :total="pageData.total" />
</template>
<script setup lang="ts">


import { dayjs, ElMessageBox, ElMessage } from 'element-plus'

const router = useRouter()
const productStatusData = ref<any>([])
const tableData = ref<any>([])

const formData = reactive({ parentId: 0, name: '', status: 0 })
const pageData = reactive({
    total: 0,
    pageNum: 1,
    pageSize: 10
})
onMounted(() => {

    callApi()
    callProductStatusData()

})
const callProductStatusData = () => {
    enumApi.select({ enumClassName: "CategoryStatus" }).then((res: any) => {

        res = [{ code: 0, message: "全部" }].concat(res)
        productStatusData.value = res
    })
}
const onSubmit = () => {

    callApi()

}
const pageChange = (currentPage: number, pageSize: number) => {

    pageData.pageNum = currentPage
    pageData.pageSize = pageSize

    callApi()
}
const callApi = () => {
    let params: any = {}
    params.parentId = formData.parentId != undefined ? formData.parentId : undefined
    params.name = formData.name != '' ? formData.name : undefined
    params.pageNum = pageData.pageNum
    params.pageSize = pageData.pageSize
    params.status = formData.status != 0 ? formData.status : undefined
    categoryApi.select(params).then((res: any) => {
        pageData.total = res.total
        tableData.value = res
    })


}

const editClick = (row: any) => {
    router.push({ name: "category-edit", params: { id: row.id } })
}
const deleteClick = (row: any) => {
    ElMessageBox.confirm(
        '你确定要删除 ' + row.name + ' 吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {

            productApi.delete({ id: row.id }).then((res: any) => {

                ElMessage.success('删除成功')
                callApi()
            })

        })
        .catch(() => {

        })
}

</script>

<style scoped>
.img {
    width: 50px;
    height: 50px;
    border-radius: 5px;
}
</style>